<template>
  <div class="list-wrapper">
    <div class="list-main">
      <!-- 顶部 -->
      <div class="list-t">
        <div class="list-t-l">概览</div>
        <div class="list-t-r">
          <div class="list-t-r-action">
            <el-button size="medium" @click="openMark()">
              <i class="fa fa-pencil" />概览标注
            </el-button>
            <el-button size="medium" @click="openRatio">
              <i class="fa fa-exchange" />对比栏
            </el-button>
            <el-button size="medium" @click="ybkbnt">
              <i class="fa fa-file-text-o" />样本库
            </el-button>
            <el-dropdown @command="exportdoc">
              <el-button>
                导出<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">案件基本信息</el-dropdown-item>
                <el-dropdown-item command="2">案件详细信息</el-dropdown-item>
                <el-dropdown-item command="3">概览数据</el-dropdown-item>
                <el-dropdown-item command="4">决定全文</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button size="medium" type="primary" @click="skipping">
              <i class="fa fa-search" />二次检索
            </el-button>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="list-content">
        <!-- 侧边栏 统计导航 -->
        <!-- ,'height':`${sidebarHeight}px` -->
        <div class="list-nav" :style="{'width':`${sidebarWdith}px`}">
          <div class="list-nav-title">
            <span v-if="!isCollapse">统计导航</span><span @click="hanldIsCollapse" style="float: none; cursor:pointer;"><i class="fa fa-outdent" ref="clickIcon"/></span>
          </div>
          <el-menu class="list-menu" :collapse="isCollapse">
            <el-submenu
              :index="item.key"
              v-for="item in leftList"
              :key="item.key"
            >
              <template slot="title">
                <i class="el-icon-menu"/>
                <span>{{ item.key }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="Item in item.res"
                  :index="Item[0]"
                  :key="Item[0]"
                  @click="changeSelect(item, Item)"
                >
                  <p style="display:flex;">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="Item[0]"
                      placement="top"
                    >
                      <i
                        style="
                          flex:1;
                          font-style: normal;
                          display: inline-block;
                          color: black;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                        >{{ Item[0] }}</i
                      >
                    </el-tooltip>
                    <span>{{ Item[1] }}</span>
                  </p>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <!-- 列表-->
        <div class="total">共{{ total }}件相关案件</div>
        <div class="list-list" :style="{'margin-left':`${contentWidth}px`}">
          <div class="list-l-wrap">
            <div class="list-filter">
              <!-- 排序 -->
              <div class="list-filter-l">
                <!-- 排序： -->
                <div class="sort_list">
                  <div
                    class="sort_box"
                    v-for="item in sortFields"
                    :key="item.id"
                  >
                    <div
                      class="sort_item"
                      @click="
                        sortId = item.id;
                        selSort(item);
                      "
                    >
                      <div>
                        {{ item.name }}
                      </div>
                      <div class="sort_icon_box">
                        <div
                          :class="[
                            'sort_icon',
                            sortId == item.id && item.sort == '+' + item.name
                              ? 'activeIcon'
                              : '',
                          ]"
                        >
                          <i class="el-icon-caret-top"></i>
                        </div>
                        <div
                          :class="[
                            'sort_icon',
                            sortId == item.id && item.sort == '-' + item.name
                              ? 'activeIcon'
                              : '',
                          ]"
                        >
                          <i class="el-icon-caret-bottom"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 
                <el-select v-model="form.sortField" placeholder="请选择" @change="getList">
                  <el-option class="list-select" v-for="item in options"
                    :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
                -->

                <!-- <el-radio-group v-model="stortRadio"   @change="getList">
                     <el-radio label="决定日"></el-radio>
                     <el-radio label="申请号"></el-radio>
                     <el-radio label="请求日"></el-radio>
                     <el-radio label="案件编号"></el-radio>
                </el-radio-group> -->

                <!-- <el-tabs type="border-card" @tab-click="getList" v-model="stortRadio">
                  <el-tab-pane name="决定日">
                     <span slot="label"><i class="el-icon-d-caret"/>决定日</span>
                   </el-tab-pane>
                   <el-tab-pane name="案件编号">
                      <span slot="label"><i class="el-icon-d-caret">案件编号</span>
                   </el-tab-pane>
                   <el-tab-pane name="决定号">
                      <span slot="label"><i class="el-icon-d-caret">决定号</span>
                   </el-tab-pane>
               </el-tabs> -->
              </div>
              <!-- 全部选择  展开 收起 -->
              <div class="list-filter-r">
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                  >全部选择</el-checkbox
                >
                <p
                  :class="[{ 'is-active': !showAllShrink }, 'list-filter-open']"
                  @click="collapseAll"
                >
                  <span>{{ showAllShrink ? "全部收起" : "全部展开" }}</span>
                  <i class="fa fa-angle-double-down"></i>
                </p>
              </div>
            </div>
            <!-- table -->
            <div class="list-table">
              <el-checkbox-group
                v-model="checkedList"
                @change="handleCheckedListChange"
              >
                <el-collapse v-model="activeNames" @change="handleChange">
                  <div
                    class="list-table-item"
                    v-for="(item, index) in list"
                    :key="item.案件编号"
                  >
                    <div class="list-table-item-t">
                      <div class="list-table-l">
                        <div class="list-table-head">
                          <el-checkbox :label="item.申请号">
                            <span style="display: none"
                              >{{ item.申请号 }} {{ item.发明名称 }}</span
                            >
                          </el-checkbox>
                          <b @click="goURL(item)">
                            {{ item.申请号 }} {{ item.发明名称 }}</b
                          >
                          <span class="list-t-h-tag">
                            {{
                              form.dataSource == "waiguan"
                                ? item.无效结论
                                : form.dataSource == "susong"
                                ? item.判决结论
                                : item.决定结论
                            }}
                          </span>
                        </div>
                        <div class="list-table-body">
                          <el-row v-if="form.dataSource == 'susong'">
                            <el-col :span="12">
                              <el-col :span="9" class="text-right"
                                >案件编号：</el-col
                              >
                              <el-col :span="15">{{ item.案件编号 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="9" class="text-right"
                                >判决裁定日：</el-col
                              >
                              <el-col :span="15">{{ item.判决裁定日 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="9" class="text-right"
                                >判决结论：</el-col
                              >
                              <el-col :span="15">{{ item.判决结论 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="9" class="text-right"
                                >判决总体结论：</el-col
                              >
                              <el-col :span="15">{{
                                item.判决总体结论
                              }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="9" class="text-right"
                                >主分类号：</el-col
                              >
                              <el-col :span="15">{{ item.主分类号 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="9" class="text-right"
                                >案源处室：</el-col
                              >
                              <el-col :span="15">{{ item.案源处室 }}</el-col>
                            </el-col>
                          </el-row>
                          <el-row v-else>
                            <el-col :span="12">
                              <el-col :span="8" class="text-right"
                                >案件编号：</el-col
                              >
                              <el-col :span="16">{{ item.案件编号 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="8" class="text-right"
                                >决定号：</el-col
                              >
                              <el-col :span="16">{{ item.决定号 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="8" class="text-right"
                                >决定日：</el-col
                              >
                              <el-col :span="16">{{ item.决定日 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="8" class="text-right"
                                >主分类号：</el-col
                              >
                              <el-col :span="16">{{ item.主分类号 }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="8" class="text-right"
                                >合议组长：</el-col
                              >
                              <el-col :span="16">{{
                                item.合议组长姓名
                              }}</el-col>
                            </el-col>
                            <el-col :span="12">
                              <el-col :span="8" class="text-right"
                                >案源处室：</el-col
                              >
                              <el-col :span="16">{{ item.案源处室 }}</el-col>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                      <div class="list-table-r">
                        <div>
                          <el-button
                            size="medium"
                            type="danger"
                            @click.stop.prevent="deleteItem(item, index)"
                          >
                            <i class="fa fa-trash-o" />删除
                          </el-button>
                        </div>
                        <div>
                          <el-button
                            size="medium"
                            @click.stop.prevent="addDuibi(item)"
                          >
                            <i class="fa fa-plus-circle" />添加对比
                          </el-button>
                        </div>
                      </div>
                    </div>
                    <div
                      class="list-table-item-b"
                      @click.stop.prevent="queryDetail(item, index)"
                    >
                      <el-collapse-item
                        :name="item.案件编号"
                        class="list-collapse"
                      >
                        <template slot="title">
                          {{ item.showInfo ? "收起" : "展开"
                          }}<i class="fa fa-angle-double-down" />
                        </template>
                        <div
                          class="list-collapse-con"
                          v-if="form.dataSource == 'fushen' && item.fushenData"
                        >
                          <div class="list-collapse-item">
                            <div class="list-collapse-title">决定概要</div>
                            <div class="list-collapse-body">
                              <el-row>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >专利（申请）号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.shenqingh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >决定结果：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.juedingjl
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >复审请求人：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.fushenqqr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >主审员：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.zhusheny
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >国际分类号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.guojiflh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >公开公告日：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.gongkaiggr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >涉及法条：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.shejiftjd3
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >证据分类：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.fushenData.zhengjufl
                                  }}</el-col>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                          <div
                            class="list-collapse-item"
                            v-if="item.fushenData.scls"
                          >
                            <div class="list-collapse-title">审查历史</div>
                            <div
                              class="list-collapse-body list-collapse-history"
                              v-for="(it, index2) in item.fushenData.scls"
                              :key="index2"
                            >
                              <div class="list-collapse-history-step">
                                <div class="list-collapse-history-date">
                                  {{ it.riqi }}
                                </div>
                                <div class="list-collapse-history-name">
                                  {{ it.content }}
                                </div>
                              </div>
                              <div
                                class="list-collapse-history-line"
                                v-if="index2 != item.fushenData.scls.length - 1"
                              >
                                <i class="fa fa-angle-right" />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="list-collapse-con"
                          v-if="form.dataSource == 'wuxiao' && item.wuxiaoData"
                        >
                          <div class="list-collapse-item">
                            <div class="list-collapse-title">决定概要</div>
                            <div class="list-collapse-body">
                              <el-row>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >专利（申请）号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.shenqingh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >决定结果：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.juedingjl
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >无效请求人：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.wuxiaozlqrxm
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >主审员：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.zhusheny
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >国际分类号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.guojiflh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >公开公告日：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.gongkaiggr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >涉及法条：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.shejiftjd3
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >证据分类：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.wuxiaoData.zhengjufl
                                  }}</el-col>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                          <div
                            class="list-collapse-item"
                            v-if="item.wuxiaoData.scls"
                          >
                            <div class="list-collapse-title">审查历史</div>
                            <div
                              class="list-collapse-body list-collapse-history"
                              v-for="(item, index) in item.wuxiaoData.scls"
                              :key="index"
                            >
                              <div class="list-collapse-history-step">
                                <div class="list-collapse-history-date">
                                  {{ item.riqi }}
                                </div>
                                <div class="list-collapse-history-name">
                                  {{ item.content }}
                                </div>
                              </div>
                              <div
                                class="list-collapse-history-line"
                                v-if="index != item.wuxiaoData.scls.length - 1"
                              >
                                <i class="fa fa-angle-right" />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="list-collapse-con"
                          v-if="
                            form.dataSource == 'waiguan' && item.waiguanData
                          "
                        >
                          <div class="list-collapse-item">
                            <div class="list-collapse-title">决定概要</div>
                            <div class="list-collapse-body">
                              <el-row>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >专利（申请）号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.shenqingh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >决定号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.juedingh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >决定结果：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.juedingjl
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >申请日：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.shenqingr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >决定日：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.juedingr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >授权公告日：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.shouquanggr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >发明创造名称：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.zhuanlimc
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >合议组长：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.heyizzxm
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >主审员：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.zhusheny
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >国际分类号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.guojiflh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >涉及法条：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.shejiftjd3
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >证据分类：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.waiguanData.zhengjufl
                                  }}</el-col>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                          <div
                            class="list-collapse-item"
                            v-if="item.waiguanData.scls"
                          >
                            <div class="list-collapse-title">审查历史</div>
                            <div
                              class="list-collapse-body list-collapse-history"
                              v-for="(item, index) in item.waiguanData.scls"
                              :key="index"
                            >
                              <div class="list-collapse-history-step">
                                <div class="list-collapse-history-date">
                                  {{ item.riqi }}
                                </div>
                                <div class="list-collapse-history-name">
                                  {{ item.content }}
                                </div>
                              </div>
                              <div
                                class="list-collapse-history-line"
                                v-if="index != item.waiguanData.scls.length - 1"
                              >
                                <i class="fa fa-angle-right" />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="list-collapse-con"
                          v-if="form.dataSource == 'susong' && item.susongData"
                        >
                          <div class="list-collapse-item">
                            <div class="list-collapse-title">决定概要</div>
                            <div class="list-collapse-body">
                              <el-row>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >专利（申请）号：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.shenqingh
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >决定结果：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.juedingjl
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >申请日：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.shenqingr
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >原告：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.yuangaoxm
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >被告：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.beigaoxm
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >第三人：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.disanrxm
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >审判长：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.shenpanz
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >审判员：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.shenpanypsy
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >书记员：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.shujiy
                                  }}</el-col>
                                </el-col>
                                <el-col :span="8">
                                  <el-col :span="12" class="text-right"
                                    >证据分类：</el-col
                                  >
                                  <el-col :span="12">{{
                                    item.susongData.zhengjufl
                                  }}</el-col>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                          <div
                            class="list-collapse-item"
                            v-if="item.susongData.scls"
                          >
                            <div class="list-collapse-title">审查历史</div>
                            <div
                              class="list-collapse-body list-collapse-history"
                              v-for="(item, index) in item.susongData.scls"
                              :key="index"
                            >
                              <div class="list-collapse-history-step">
                                <div class="list-collapse-history-date">
                                  {{ item.riqi }}
                                </div>
                                <div class="list-collapse-history-name">
                                  {{ item.content }}
                                </div>
                              </div>
                              <div
                                class="list-collapse-history-line"
                                v-if="index != item.susongData.scls.length - 1"
                              >
                                <i class="fa fa-angle-right" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-collapse-item>
                    </div>
                  </div>
                </el-collapse>
              </el-checkbox-group>
            </div>
            <!-- 分页 -->
            <div class="list-pagination" v-if="list.length > 0">
              <el-pagination
                :current-page="form.page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="form.size"
                layout="slot,total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                :page-count="list.length/form.size"
                @current-change="handleCurrentChange"
              >
                <template>
                  <i class="pageSize" style="
                    flex:1;
                    font-style: normal;
                    display: inline-block;
                    color: black;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    font-weight: 400;
                    padding-top: 8px;
                    margin: 0 20px;">
                  {{`共${ form.size % list.length ? Math.ceil(list.length / form.size) : list.length / form.size }页`}}
                  </i>
                </template>
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加个人标注 -->
    <mark-outer
      :showVisible.sync="markOuterVisible"
      :parentInfo="listData"
      @closeDialog="closeDialog"
    ></mark-outer>
    <!-- 添加至样本库 -->
    <el-dialog
      title="添加至样本库"
      :visible.sync="ybkOuterVisible"
      class="list-dialog"
    >
      <el-form
        :model="ybkRuleForm"
        :rules="rules"
        ref="ybkRuleForm"
        label-width="160px"
        class="list-ruleForm"
      >
        <el-form-item label="样本库类型：" prop="address">
          <el-select
            v-model="ybkRuleForm.address"
            placeholder="请选择"
            style="margin-left: 15px"
            @change="markOptionchange"
          >
            <el-option
              class="list-select"
              v-for="item in markOption"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="样本库：" prop="address2">
          <el-select
            v-model="ybkRuleForm.address2"
            placeholder="请选择"
            style="margin-left: 15px"
            @change="markOptionChildchange"
          >
            <el-option
              class="list-select"
              v-for="item in markOptionChild"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="text"
            class="list-ruleForm-add"
            @click="ybkInnerVisible = true"
            >+新建</el-button
          >
        </el-form-item>        
      </el-form>
      <el-dialog
        width="40%"
        title="新建样本库"
        :visible.sync="ybkInnerVisible"
        append-to-body
      >
        <el-form
          :model="ybkAddRuleForm"
          ref="ybkForm"
          label-width="96px"
          class="list-ruleForm"
        >
          <el-form-item label="样本库名称：">
            <el-input
              v-model="ybkAddRuleForm.name"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="样本库类型：">
            <el-select
              v-model="ybkAddRuleForm.type"
              placeholder="请选择"
              @change="markOptionchange1"
            >
              <el-option
                class="list-select"
                v-for="item in markOption2"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="ybkAddRuleForm.notes"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-button @click="ybkInnerVisible = false">取 消</el-button>
        <el-button type="primary" @click="ybkInner">确 定</el-button>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ybkOuterVisible = false">取 消</el-button>
        <el-button type="primary" @click="ybkOuter('ybkRuleForm')">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 对比栏 -->
    <ratio
      :show.sync="ratioStatus"
      :list.sync="ratioList"
      :duibiList="duibiList"
    ></ratio>
  </div>
</template>
<script>
import { list, otherInformation } from "@api/overview/index";
import { bankList, smpleAdd, bankAdd } from "@api/sampleBank/index";
import {
  decision,
  caseBasicInformation,
  caseDetails,
  overviewData,
} from "@api/export/index";
import ratio from "./components/ratio.vue";
import MarkOuter from "./components/markOuter.vue";
export default {
  components: {
    ratio,
    MarkOuter,
  },
  data() {
    return {
      isCollapse:false,
      sidebarWdith:'',
      sidebarHeight:'',
      contentWidth:310,
      sortId: "",
      // 排序
      sortFields: [
        {
          id: "1",
          name: "决定日",
          sort: "",
        },
        {
          id: "2",
          name: "申请号",
          sort: "",
        },
        {
          id: "3",
          name: "请求日",
          sort: "",
        },
        {
          id: "4",
          name: "案件编号",
          sort: "",
        },
      ],
      list: [], //列表
      listData: [], //传过去的列表
      // 个人标注
      // 标注所在位置
      markOption: [
        // {
        //   value: "1",
        //   label: "案由"
        // },
        // {
        //   value: "2",
        //   label: "决定的理由"
        // },
        // {
        //   value: "3",
        //   label: "决定"
        // }
      ],
      markOptionChild: [
        // {
        //   value: "1",
        //   label: "案由"
        // },
        // {
        //   value: "2",
        //   label: "决定的理由"
        // },
        // {
        //   value: "3",
        //   label: "决定"
        // }
      ],
      rules: {
                    address: [
                        { required: true, message: "样本库类型", trigger: "blur" }
                    ],
                    address2: [
                        { required: true, message: "样本库", trigger: "blur" }
                    ]
      },
      markOption2: [
        {
          value: "ktz",
          name: "课题组样本库",
        },
        {
          value: "gr",
          name: "个人样本库",
        },
      ],
      // 添加个人标注
      ruleForm: {
        address: "1",
        fenlei: "1",
        notes: "",
      },
      // 新建标注分类
      addRuleForm: {
        fenlei: "",
        notes: "",
      },
      markOuterVisible: false,
      markInnerVisible: false,
      // 样本库
      // 添加至样本库
      ybkRuleForm: {
        address: "",
        address2: "",
        id: "",
        id2: "",
        id3: "",
      },
      // 新建样本库
      ybkAddRuleForm: {
        name: "",
        type: "",
        notes: "",
      },
      ybkOuterVisible: false,
      ybkInnerVisible: false,
      checkAll: false,
      checkedList: [],
      isIndeterminate: false,
      activeNames: [],
      showAllShrink: false, // 全部展开/收起 默认收起
      currentPage: 4,
      // 对比蓝列表
      ratioList: [
        // {
        //   id: "201407823368",
        //   msg:
        //     "一种治疗真菌性皮肤湿疹及湿疹一种治疗真菌性皮肤及湿疹啊实打实一种治疗真菌性皮肤湿疹及湿疹一种治疗真菌性皮肤及湿疹啊实打实"
        // },
        // {
        //   id: "201407823368",
        //   msg:
        //     "一种治疗真菌性皮肤湿疹及湿疹一种治疗真菌性皮肤及湿疹啊实打实一种治疗真菌性皮肤湿疹及湿疹一种治疗真菌性皮肤及湿疹啊实打实"
        // },
        // {
        //   id: "201407823368",
        //   msg:
        //     "一种治疗真菌性皮肤湿疹及湿疹一种治疗真菌性皮肤及湿疹啊实打实一种治疗真菌性皮肤湿疹及湿疹一种治疗真菌性皮肤及湿疹啊实打实"
        // }
      ],
      duibiList: [],
      ratioStatus: false,
      classifyExpArry: [], // 分类检索式
      classField: [], // 分类检索式

      /* DLJ 20210903 START  */
      stortRadio: "决定日",
      sortFieldRadio: true,
      /* DLJ 20210903 END  */

      form: {
        exp: "", // 检索式
        expId: "", // 检索式ID
        classifyExp: "", // 分类检索式
        page: 1, // 当前页数
        size: 10, // 显示条数
        sortField: "", // 排序字段
        dataSource: "", // 检索数据类型
        displayFields: "", // 检索式
        classField: "", // 专利类型,主分类号,决定号
      },
      total: 0,
      // 左侧导航栏数据
      leftList: [],
      isSelect: {},
      fushenData: {}, //复审展开详情
      wuxiaoData: {}, //无效展开详情
      waiguanData: {}, //外观展开详情
      susongData: {}, //司法判决展开详情
      jiansuo: [],
    };
  },
  watch: {
    activeNames: {
      handler(newVal) {
        this.showAllShrink = newVal.length === this.list.length;
        this.list.forEach(
          (item) => (item.showInfo = newVal.includes(item.案件编号))
        );
      },
      deep: true,
    },
  },
  created() {
    console.log(this.$route.query);
    this.form.expId = JSON.parse(this.$route.query.expList).expId;
    this.form.exp = JSON.parse(this.$route.query.expList).exp;
    this.form.dataSource = this.$route.query.dataSource;
    this.getList();
    this.createdGetList(); // DLJ 20210904 APPEND
  },
  methods: {
    hanldIsCollapse(){
      if (this.isCollapse) {
        this.sidebarWdith = 270
        this.contentWidth = 310
        this.sidebarHeight = 217
        setTimeout(() => {
          this.isCollapse = !this.isCollapse
        }, 1000);
      }else{
        this.sidebarWdith = 72
        this.contentWidth = 110
        this.sidebarHeight = 100
        setTimeout(() => {
          this.isCollapse = !this.isCollapse
        }, 1000);
      }
    },
    // 排序
    selSort(item) {
      console.log(item);
      if (item.sort == "" || item.sort == "-" + item.name) {
        item.sort = "+" + item.name;
      } else {
        item.sort = "-" + item.name;
      }
      this.form.sortField = item.sort;
      this.getList();
    },
    // 打开概览标注
    openMark() {
      if (this.checkedList.length > 0) {
        this.markOuterVisible = true;
      } else {
        this.$message.warning("请先选中案件");
      }
    },
    closeDialog() {
      this.markOuterVisible = false;
    },
    exportdoc(command) {
      console.log(command);
      if (command == 1) {
        // 案件基本信息
        this.anjianjiben();
      } else if (command == 2) {
        // 案件详细信息
        this.anjianxx();
      } else if (command == 3) {
        // 概览数据
        this.anjiangl();
      } else if (command == 4) {
        // 决定全文
        this.quanwen();
      }
    },
    //decision ,caseBasicInformation,caseDetails,overviewData
    async quanwen() {
      let _this = this;
      let param = {
        dataSource: this.form.dataSource,
        dataarry: [],
      };
      this.list.map(function (ret) {
        _this.checkedList.map(function (res) {
          console.log(ret["申请号"]);
          console.log(res);
          if (ret["申请号"] == res) {
            let data = {
              anjianbh: ret["案件编号"],
              juedingh: ret["决定号"],
            };
            param.dataarry.push(data);
          }
        });
      });
      try {
        const { code, data, msg } = await decision(param);
        if (code == 200) {
        }
      } catch (error) {
        console.log(error);
      }
    },
    async anjianjiben() {
      console.log("------------------- anjianjiben START -------------------------");
      console.log(this.list);
      let _this = this;
      console.log(_this.checkedList);
      let param = {
        dataSource: this.form.dataSource,
        data: [],
      };
      this.list.map(function (ret) {
        _this.checkedList.map(function (res) {
          console.log(ret["申请号"]);
          console.log(res);
          if (ret["申请号"] == res) {
            let data = {
              anjianbh: ret["案件编号"],
              juedingh: ret["决定号"],
            };
            param.data.push(data);
          }
        });
      });
      try {
        const { code, data, msg } = await caseBasicInformation(param);
        if (code == 200) {
          console.log(code);
          console.log(data);
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
      
      console.log("------------------- anjianjiben START -------------------------");

    },
    ////////////////////// DLJ INSERT START //////////////////////////
    async getList(tab, event) {      
      console.log("------------------- getList START -------------------------");

      // console.log(tab, "1");
      // console.log(this.sortFieldRadio, "1");
      // this.sortFieldRadio = !this.sortFieldRadio;
      // console.log(this.sortFieldRadio, "2");
      // this.form.sortField = this.sortFieldRadio
      //   ? "+" + tab.name
      //   : "-" + tab.name;
      try {
        console.log("------------------- ok ok ok 200 ok ok ok -------------------------");
        const { code, data } = await list(this.form);
        if (code == 200) {

          this.total = data.total;
          this.list = data.docs.map((item, index) => {
            // item.showInfo = index === 0;
            // index === 0 && this.activeNames.push(item.案件编号);
            return item;
          });
          console.log(this.list);
          this.leftList = Object.entries(data.classInfos).map((item) => {
            let [key, res] = item;
            res = Object.entries(res);
            return {
              key,
              res,
            };
          });
        } else this.$message.error(res.msg);
      } catch (error) {
        console.log(error);
      }
      console.log(this.list);
      console.log("------------------- getList END -------------------------");

    },
    async createdGetList() {
      console.log(this.sortFieldRadio, "1");
      this.sortFieldRadio != this.sortFieldRadio;
      console.log(this.sortFieldRadio, "2");
      this.form.sortField = this.sortFieldRadio
        ? "+" + this.stortRadio
        : "-" + this.stortRadio;
      try {
        const { code, data } = await list(this.form);
        if (code == 200) {
          this.total = data.total;
          this.list = data.docs.map((item, index) => {
            // item.showInfo = index === 0;
            // index === 0 && this.activeNames.push(item.案件编号);
            return item;
          });
          console.log(this.list);
          this.leftList = Object.entries(data.classInfos).map((item) => {
            let [key, res] = item;
            res = Object.entries(res);
            return {
              key,
              res,
            };
          });
        } else this.$message.error(res.msg);
      } catch (error) {
        console.log(error);
      }
    },
    ////////////////////// DLJ INSERT END //////////////////////////
    async anjianxx() {
       console.log("--------------------------- anjianxx START ---------------------------");
       console.log("--------------------------- this.checkedList ---------------------------");       
       console.log(this.checkedList);
      let _this = this;
      let param = {
        dataSource: this.form.dataSource,
        data: [],
      };
      this.list.map(function (ret) {   
        console.log(_this.checkedList);

        _this.checkedList.map(function (res) {
          console.log(ret["申请号"]);
          console.log(res);
          if (ret["申请号"] == res) {
            let data = {
              "anjianbh": ret["案件编号"],
              "juedingh": ret["决定号"],
            };
            param.data.push(data);
          }
        });
      });
      try {
        const { code, data, msg } = await caseDetails(param);
        if (code == 200) {
          console.log(code);
          console.log(data);
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
       console.log("--------------------------- anjianxx END ---------------------------");
    },
    async anjiangl() {
      let _this = this;
      let classField = this.classField.join(",");

      console.log(classField);
      let param = {
        exp: this.form.exp,
        dataSource: this.form.dataSource,
        classField: classField,
      };

      try {
        const { code, data, msg } = await overviewData(param);
        if (code == 200) {
          console.log(code);
          console.log(data);
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    markOptionchange(item) {
      console.log(item);
      let markOptionChild = "";
      this.markOption.map(function (ret) {
        if (ret.value == item) {
          markOptionChild = ret.children;
        }
      });
      this.ybkRuleForm.address2 = "";
      this.markOptionChild = markOptionChild;
    },
    markOptionChildchange(item) {
      console.log(item);
      this.ybkRuleForm.id2 = item;
    },
    markOptionchange1(item) {
      this.ybkRuleForm.id3 = item;
      console.log(item);
    },
    clearybkRuleFormData() {
      this.ybkRuleForm.address = "";
      this.ybkRuleForm.address2 = "";
    },
    clearybkAddRuleFormData() {
      (this.ybkAddRuleForm.name = ""),
        (this.ybkAddRuleForm.type = ""),
        (this.ybkAddRuleForm.notes = "");
    },
    async ybkInner() {
      console.log("--------------------------------- ybkInner START ---------------------------------");

      //备注
      var param = {
        yangbenkmc: this.ybkAddRuleForm.name,
        jiankusm: this.ybkAddRuleForm.notes,
        yangbenlx: this.ybkRuleForm.id3,
      };
      console.log(param);
      try {
        const { code, data, msg } = await bankAdd(param);
        if (code == 200) {
          if (msg == "succeed") {
            console.log("1111");
            this.$message({
              showClose: true,
              message: "添加完成!",
              type: "success",
            });
            this.clearybkAddRuleFormData();
            this.ybkbnt();
          }
        }
      } catch (error) {
        console.log(error);
      }

      this.ybkInnerVisible = false;
      console.log("--------------------------------- ybkInner END ---------------------------------");

    },
    async ybkbnt() {
      if (this.checkedList.length < 1) {
        return this.$message.warning("请先选择案件");
      }
      try {
        const { code, data, msg } = await bankList();
        if (code == 200) {
          console.log(data);
          this.markOption = data;
        }
      } catch (error) {
        console.log(error);
      }
      this.ybkOuterVisible = true;
    },
    ybkOuter(formName) {
      this.$refs[formName].validate(valid => {
          if (valid) {
               console.log(`已提交表单`);
                  let _this = this;
                  let data = {
                    yangbenkmc: this.ybkRuleForm.address,  // 样本库id
                    yangbenkid: this.ybkRuleForm.address2,  // 样本库id
                    juedingh: "",
                    anjianbh: "",
                    shenqingh: "",
                    anjianlx: "",
                  };
                  this.list.map(function (ret) {
                    if (ret["申请号"] == _this.checkedList[0]) {
                      console.log(ret["决定号"]);
                      //data["yangbenkid"] = ret["样本库id"]; // DLJ 20210903 MODIFY
                      //data["yangbenkid"] = ret["样本库id"]; // DLJ 20210903 MODIFY
                      data["juedingh"] = ret["决定号"];
                      data["anjianbh"] = ret["案件编号"];   // DLJ 20210903 MODIFY
                      data["shenqingh"] = ret["申请号"];
                      data["anjianlx"] = _this.form.dataSource;
                    }
                  });
                  try  {                      
                      console.log("------------------------------ smpleAdd START -------------------------------");
                      this._smpleAddM(data);
                      this.ybkOuterVisible = false;
                    } catch (error) {
                        console.log(error);
                      }
          } else {
               console.log("error submit!!");
               return false;
          }
      });

    },
    async _smpleAddM(data){
          const { code, msg } =  await smpleAdd(data);
            if (code == 200) {
                    console.log(msg);
                   if (msg == "succeed") {
                         this.$message({
                          showClose: true,
                           message: "样本已添加!",
                           type: "success",
                         });
                         this.clearybkRuleFormData();
                         this.getList();
                  }    
           }
    },
    goURL(item) {
      // 案件编号（anjianbh）、决定号（juedingh）、类型（dataSource）
      let data = {
        anjianbh: item.案件编号,
        juedingh: item.决定号,
        dataSource: this.form.dataSource,
      };
      this.$router.push({
        path: "/pages/info/1",
        query: { data: JSON.stringify(data) },
      });
    },
    changeSelect(parent, item) {
      console.log(parent);
      console.log(item);
      if (!this.isSelect[parent.key]) {
        this.isSelect[parent.key] = {};
      }
      Object.entries(this.isSelect[parent.key]).forEach((item) => {
        this.isSelect[parent.key][item[0]] = false;
      });
      this.isSelect[parent.key][item[0]] = true;
      let classifyExp = "";
      let classifyExp2 = "";
      Object.entries(this.isSelect).forEach(([, value]) => {
        Object.entries(value).forEach(([key, value]) => {
          value && (classifyExp += `${key},`);
        });
      });

      var flag = false;
      this.jiansuo.map(function (res) {
        if (res == parent.key) {
          flag = true;
        }
      });
      if (!flag) {
        this.jiansuo.push(parent.key);
        var data = {
          item: item[0],
          parent: parent["key"],
        };
        this.classifyExpArry.push(data);
        this.classField.push(item[1]);
      } else {
        this.classifyExpArry.map(function (ret) {
          if (ret.parent == parent.key) {
            ret["item"] = item[0];
          }
        });
      }
      for (var i = 0; i < this.classifyExpArry.length; i++) {
        if (i == 0) {
          classifyExp2 +=
            this.classifyExpArry[i]["parent"] +
            "=" +
            this.classifyExpArry[i]["item"];
        } else {
          classifyExp2 +=
            " and " +
            this.classifyExpArry[i]["parent"] +
            "=" +
            this.classifyExpArry[i]["item"];
        }
      }

      console.log(this.classField);
      this.form.classifyExp = classifyExp2;
      this.getList();
    },
    //添加对比
    addDuibi(item) {
      /* DLJ MODIFY START */
      if (this.ratioList.length >= 3) {
        this.$message("对不起，最多添加3个案件信息。");
        flag = false;
      } else {
        let flag = true;
        this.ratioList.map(function (ret) {
          if (ret.id == item["申请号"]) {
            flag = false;
          }
        });

        if (flag) {
          this.ratioList.push({
            id: item["申请号"],
            msg: item["发明创造名称"],
          });
          this.duibiList.push(item);
        } else {
          this.$message({
            showClose: true,
            message: "已添加",
            type: "success",
          });
          this.getList();
        }

        this.ratioStatus = true;
      }
      /* DLJ MODIFY END */

      console.log(item);
    },
    // 打开对比栏
    openRatio() {
      this.ratioStatus = true;
    },
    //获取列表
    async getList() {
      try {
        const { code, data } = await list(this.form);
        if (code == 200) {
          this.total = data.total;
          this.list = data.docs.map((item, index) => {
            // item.showInfo = index === 0;
            // index === 0 && this.activeNames.push(item.案件编号);
            return item;
          });
          console.log(this.list);
          this.leftList = Object.entries(data.classInfos).map((item) => {
            let [key, res] = item;
            res = Object.entries(res);
            return {
              key,
              res,
            };
          });
        } else this.$message.error(res.msg);
      } catch (error) {
        console.log(error);
      }
    },
    // 是否展开 查询详情信息
    queryDetail(item, index) {
      if (item.showInfo) {
        this.getOtherInformation(item, index);
      }
    },
    // 获取其他信息
    async getOtherInformation(item, index) {
      let params = {
        anjianbh: item.案件编号,
        juedingh: item.决定号,
        leixing: this.form.dataSource,
      };
      const { code, data } = await otherInformation(params);
      console.log(data);
      switch (params.leixing) {
        case "fushen":
          this.$set(this.list[index], "fushenData", data);
          break;
        case "wuxiao":
          this.$set(this.list[index], "wuxiaoData", data);
          break;
        case "waiguan":
          this.$set(this.list[index], "waiguanData", data);

          break;
        case "susong":
          this.$set(this.list[index], "susongData", data);
          break;
      }
    },
    // 删除
    deleteItem(item, index) {
      console.log("------------------------------ deleteIte START -----------------------------------");
      console.log(item);
      console.log(index);

      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.list.splice(index, 1);

            console.log(this.$router);
            this.form.exp = this.form.exp + " and (决定号 !=" + item.决定日 + " and 案件编号 != " + item.案件编号 + ")";
            console.log(this.form.exp);

            //this.skippingPT();
            this.getList();
        })
    },
    // 添加个人标注
    glMark() {},
    // 跳转高级检索 需要把第一次的检索参数带到上一个页面
    skippingPT() {
      // 跳转到[概览]列表显示界面
      console.log(
        "------------------------------ skippingPT -----------------------------------"
      );

      this.$router.push({
        path: "/pages/list",
        query: {
          expList: JSON.stringify(this.form.exp),
          dataSource: this.paneName,
        },
      });
    },
    // 跳转高级检索 需要把第一次的检索参数带到上一个页面
    skipping() {
      this.$router.push({
        path: "advanced-search",
        query: {
          expList: JSON.stringify(this.form.exp),
          dataSource: this.form.dataSource,
        },
      });
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkedList = val ? this.list.map((item) => item.申请号) : [];
      this.isIndeterminate = false;
    },
    handleCheckedListChange(value) {
      value.forEach((item, index) => {
        if (item == this.list[index].申请号) {
          this.listData[index] = this.list[index];
        }
        this.listData.forEach((item, index) => {
          if (item.申请号 != value[index]) {
            this.listData.splice(index, 1);
          }
        });
        console.log(this.listData);
      });
      console.log(value, this.list);
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.list.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.list.length;
    },
    // 折叠面板
    handleChange(list) {
      console.log(list);
      console.log(this.activeNames);
      console.log(this.showAllShrin);
      this.list.forEach((item) => {
        item.showInfo = !this.showAllShrink;
      });
    },
    // 全部展开收缩
    collapseAll() {
      this.activeNames =
        this.activeNames.length == this.list.length
          ? []
          : this.list.map((item) => item.案件编号);
      this.handleChange(this.activeNames);
    },
    // 翻页
    handleSizeChange(val) {
      this.form.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.sort_list {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  width: 500px;
  height: 36px;
  line-height: 36px;
  .sort_box {
    border-right: 1px solid #ccc;
    flex: 1;
    cursor: pointer;
    &:last-child {
      border: none;
    }
    .sort_item {
      display: flex;
      justify-content: center;
      .sort_icon_box {
        margin-top: -4px;
        .sort_icon {
          height: 8px;
          color: #ccc;
        }
        .activeIcon {
          color: #5959ff;
        }
      }
    }
  }
}
.total {
  text-align: right;
  margin-bottom: 10px;
  color: #999999;
}
$blue-color: #2d54b8;
$main-color: #303133;
.list-main {
  .el-checkbox__inner::after {
    left: 5px;
    top: 2px;
  }
  .el-button {
    color: $main-color;
  }
}
// 菜单
.list-menu {
  border-radius: 4px;
  border-right: 1px solid #dcdfe6;
  background-color: #ffffff;
  .el-submenu__title {
    padding: 0 13px 0 15px !important;
    background-color: #ebeef5;
    color: $blue-color;
    font-size: 16px;
  }
  .el-submenu__title i {
    color: $blue-color;
  }
  .el-submenu__icon-arrow {
    font-weight: 700;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-submenu {
    margin-bottom: 1px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-menu-item {
      height: 46px;
      line-height: 46px;
      padding: 0 !important;
      p {
        margin: 0 0 0 15px;
        border-bottom: 1px solid #e4e7ed;
        padding: 0 13px 0 0;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:focus,
      &:hover {
        p {
          border-bottom: 1px solid #ecf5ff;
        }
      }
      span {
        // float: right;
        background-color: $blue-color;
        height: 24px;
        line-height: 24px;
        padding: 0 4px;
        color: #ffffff;
        border-radius: 4px;
        margin-top: 11px;
        width: 62px;
      }
    }
  }
}
.list-menu {
  .list-menu-more {
    margin: 0 10px 10px 10px;
    .el-button {
      width: 100%;
      border: 0;
      background: #ebeef5;
      border-radius: 10px;
      color: $blue-color;
    }
    .el-button--primary.is-plain:focus,
    .el-button--primary.is-plain:hover {
      color: #ffffff;
      background-color: $blue-color;
      i {
        color: #ffffff;
      }
    }
    i {
      color: $blue-color;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      font-size: 12px;
      margin: -2px 0 0 6px;
      font-weight: 700;
    }
  }
}
// 筛选
.list-select {
  font-size: 14px;
}
.list-filter-l {
  .el-input {
    font-size: 14px;
  }
  .el-input__inner {
    height: 36px;
    line-height: 36px;
    background-color: #fafafa;
    border-color: #dcdfe6;
  }
}
.list-l-wrap {
  .el-checkbox__inner {
    width: 16px;
    height: 16px;
    border-color: #dddddd;
  }
}
.list-table-head {
  .el-checkbox__label {
    line-height: 16px;
    padding-left: 20px;
  }
}
// 折叠面板
.list-table-item-b {
  .el-collapse-item__content {
    padding: 0;
  }
}
.list-collapse {
  .el-collapse-item__header {
    position: absolute;
    right: 40px;
    top: 104px;
    z-index: 1;
    width: 54px;
    text-align: center;
    color: $blue-color;
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .fa-angle-double-down {
    margin-left: 8px;
  }
  .is-active {
    .fa-angle-double-down {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
}
.list-pagination {
  text-align: right;
  .el-pager li {
    border: 1px solid #dcdfe6;
    height: 34px;
    line-height: 34px;
    margin: 0 3px;
    border-radius: 6px;
    &.active {
      color: $blue-color;
      cursor: default;
    }
    &.active + li {
      border-left: normal;
    }
  }
  .el-input--mini .el-input__inner {
    height: 34px;
    line-height: 34px;
  }
  .el-pagination button,
  .el-pagination span:not([class*="suffix"]) {
    height: 34px;
    line-height: 34px;
  }
}
// 弹框
.list-wrapper {
  .el-dialog__title {
    font-size: 16px;
    font-weight: 700;
  }
}
.list-ruleForm {
  .el-form-item__label {
    font-size: 14px;
    font-weight: normal;
  }
  .el-textarea,
  .el-input {
    font-size: 14px;
  }
  .list-ruleForm-add {
    margin-left: 15px;
  }
}
</style>
<style lang="scss" scoped>
// 公共
$main-color: #303133;
$blue-color: #2d54b8;
.el-dropdown-menu__item {
  font-size: 14px;
}
.list-nav {
  transition: auto,2s,auto;
  border-left: 6px solid $blue-color;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 18px;
  .list-nav-title {
    border-radius: 0 4px 0 0;
    border-right: 10px solid #fb9437;
    background-color: $blue-color;
    color: #ffffff;
    padding: 0 10px 0 15px;
    height: 46px;
    line-height: 46px;
    span {
      float: left;
    }
    i {
      float: right;
      font-size: 18px;
      height: 46px;
      line-height: 46px;
    }
  }
}
.text-right {
  text-align: right;
  padding-right: 10px;
}
// 按钮以及图标
.svg-icon {
  margin-right: 10px;
  color: $main-color;
}
.el-dropdown {
  margin: 0 12px;
  .el-button {
    padding: 10px;
    font-size: 14px;
  }
}
.el-button + .el-button {
  margin-left: 12px;
}
.el-button:focus,
.el-button:hover {
  .svg-icon {
    color: #409eff;
  }
}
.el-button--danger {
  .svg-icon {
    color: #ffffff;
  }
}
.el-button--danger:focus,
.el-button--danger:hover {
  .svg-icon {
    color: #ffffff;
  }
}
.el-checkbox-group {
  font-size: 14px;
  color: #606266;
}
.list-wrapper,
button,
input,
optgroup,
select,
textarea {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
  font-size: 14px;
}
// 内容
.list-wrapper {
  background-color: #f7f7f7;
  font-size: 16px;
  color: $main-color;
  margin-top: 20px;
}
.list-main {
  margin: 0 auto;
  width: 1200px;
  overflow: hidden;
}
.list-pagination {
  text-align: right;
}
.list-breadcrumb {
  margin: 20px 0;
  padding-left: 14px;
  height: 14px;
  line-height: 14px;
  position: relative;
  &::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: $blue-color;
  }
  .el-breadcrumb__separator {
    margin: 0 10px;
    font-weight: normal;
    color: #a6a6a6;
  }
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #404040;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: #a6a6a6;
}
.list-t {
  margin-bottom: 14px;
  overflow: hidden;
  width: 100%;
  .list-t-l {
    float: left;
    width: 270px;
    font-size: 24px;
  }
  .list-t-r {
    margin-left: 270px;
    .list-t-r-action {
      text-align: right;
      .el-button--primary {
        background-color: $blue-color;
        border-color: $blue-color;
        color: #ffffff;
        .svg-icon {
          color: #ffffff;
        }
        &:focus,
        &:hover {
          background: #5176c1;
          border-color: #5176c1;
          .svg-icon {
            color: #ffffff;
          }
        }
      }
      .el-button--medium {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
      }
      i {
        font-size: 14px;
        margin-right: 8px;
      }
    }
  }
}
.list-content {
  overflow: hidden;
  width: 100%;
}
// 左侧菜单
.list-nav {
  width: 270px;
  float: left;
  background-color: #fff;
}
// 右侧
.list-filter {
  overflow: hidden;
  margin-bottom: 20px;
  height: 36px;
  line-height: 36px;
  .list-filter-l {
    float: left;
    font-weight: 700;
    font-size: 14px;
    .el-select {
      width: 120px;
    }
  }
  .list-filter-r {
    float: right;
    .el-checkbox {
      color: $main-color;
      float: left;
    }
    .list-filter-open {
      float: left;
      margin: 0 0 0 40px;
      font-size: 14px;
      color: $blue-color;
      i {
        margin-left: 8px;
      }
      &.is-active {
        i {
          transform: rotate(180deg);
        }
      }
      &:hover,
      &:focus {
        cursor: pointer;
        color: #66b1ff;
      }
    }
  }
}
// 列表
.list-list {
  transition: auto,2s;
  // margin-left: 310px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
}
.list-l-wrap {
  margin: 20px;
}
.list-table-head {
  .el-checkbox {
    font-weight: 700;
    color: $main-color;
    margin-left: 10px;
  }
  .list-t-h-tag {
    background-color: #ebeef5;
    color: $blue-color;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    display: inline-block;
    border-radius: 6px;
    margin-left: 20px;
  }
}
.list-table-body {
  line-height: 30px;
  margin: 6px 0 0 44px;
}
.el-collapse {
  border: 0;
}
.list-table-item {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 1;
    height: 92px;
    width: 6px;
    border-radius: 0 6px 6px 0;
    background-color: $blue-color;
  }
  .list-table-item-t {
    padding: 20px 20px 11px 10px;
  }
  .list-table-l {
    margin-right: 142px;
  }
  .list-table-r {
    width: 104px;
    float: right;
    position: absolute;
    right: 20px;
    top: 16px;
    .el-button {
      width: 104px;
      padding: 10px 0;
      margin-bottom: 10px;
      display: block;
    }
    .el-button--danger {
      color: #ffffff;
    }
    div {
      overflow: hidden;
    }
    i {
      font-size: 14px;
      margin-right: 10px;
    }
  }
}
// 折叠面板
.list-collapse-con {
  background-color: #f9fafc;
  padding: 20px;
  overflow: hidden;
  .list-collapse-item {
    margin-bottom: 6px;
  }
  .list-collapse-title {
    color: $main-color;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      z-index: 1;
      width: 4px;
      height: 14px;
      background-color: $blue-color;
    }
  }
  .list-collapse-body {
    margin-top: 10px;
    line-height: 30px;
    .list-collapse-history-step {
      float: left;
      text-align: center;
      .list-collapse-history-date {
        text-align: center;
        color: #909399;
        font-size: 14px;
      }
      .list-collapse-history-name {
        height: 46px;
        line-height: 46px;
        background-color: #ebeef5;
        color: $blue-color;
        display: inline-block;
        padding: 0 14px;
        min-width: 104px;
        font-size: 16px;
        border-radius: 6px;
      }
    }
    .list-collapse-history-line {
      background-color: #2d54b8;
      height: 3px;
      padding: 0 56px;
      margin-top: 52px;
      position: relative;
      width: 126px;
      float: left;
    }
    .fa-angle-right {
      background-color: $blue-color;
      width: 24px;
      text-align: center;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      color: #ffffff;
      font-size: 28px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
  }
}
</style>
